<template>
	<div>
		<div>
			<el-row>
				<el-col :span="12">
					<div class="grid-content"></div>
				</el-col>
				<el-col :span="12">
					<div>
						<el-input placeholder="请输入内容" v-model="inputcid" class="input-with-select">
							<el-select v-model="select" slot="prepend" placeholder="请选择">
								<el-option label="运输合同编号" value="1"></el-option>
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="findByCid()"></el-button>
						</el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div>
			<el-table :data="tabledata" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}" :height="tableMaxHeight">
				<el-table-column fixed prop="cid" label="运输合同编号" width="180">
				</el-table-column>
				<el-table-column  prop="carriageContracts.fid" label="货运单编号" width="180">
				</el-table-column>
				<el-table-column prop="carriageContracts.driverInformations.name" label="司机姓名" width="120">
				</el-table-column>
				<el-table-column prop="carriageContracts.customerInformations.name" label="发货客户" width="120">
				</el-table-column>
				<el-table-column prop="carriageContracts.customerIns.name" label="收货客户" width="120">
				</el-table-column>
				<el-table-column prop="carriageContracts.customerInformations.address" label="发货地址" width="120">
				</el-table-column>
				<el-table-column prop="carriageContracts.customerIns.address" label="收货地址" width="120">
				</el-table-column>
				<el-table-column prop="carriageContracts.freightStatus.status" label="运单状态" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.carriageContracts.freightStatus.status == 0">待发货</span>
						<span v-if="scope.row.carriageContracts.freightStatus.status == 1">运输中</span>
						<span v-if="scope.row.carriageContracts.freightStatus.status == 2">中转中</span>
						<span v-if="scope.row.carriageContracts.freightStatus.status == 3">已到货</span>
						<span v-if="scope.row.carriageContracts.freightStatus.status == 4">提货中</span>
						<span v-if="scope.row.carriageContracts.freightStatus.status == 5">已提货</span>
					</template>
				</el-table-column>
				<el-table-column prop="carriageContracts.fare" label="运费" width="120">
				</el-table-column>
				<el-table-column prop="carriageContracts.insurance" label="保险费" width="120">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="primary" plain size="small" @click="handleEdit(scope.$index, scope.row)">去结算
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="text-align: right;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum" :page-sizes="[5,10]" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
		<div>
			<el-dialog title="结算信息填写" :visible.sync="dialogFormVisible" style="width: 1000px;">
				<el-form :model="updateform">
					<el-form-item label="应付金额(元)" :label-width="formLabelWidth">
						<el-input v-model="updateform.money" autocomplete="off" disabled></el-input>
					</el-form-item>
					<el-form-item label="已付金额(元)" :label-width="formLabelWidth" required>
						<el-input v-model="updateform.moneyed" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isupdate()">取 消</el-button>
					<el-button type="primary" @click="update()">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = '';
					}
				});

				return sums;
			},
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			//结算
			handleEdit(index, row) {
				//console.log(index, row);
				this.dialogFormVisible = true;
				this.updateform = {
					...row
				};
			},
			getList() {
				//发送ajax
				this.axios.get("http://localhost:8080/driverSettle/" + this.currentPage + "/" + this.pageSize).then(
					res => {
						console.log(res.data.data);
						//this.pageInfo = res.data.data;
						let tData = [];
						let j = 0;
						for(let i = 0;i<res.data.data.list.length;i++){
							if(res.data.data.list[i].isSettle != 1){
								tData[j] = res.data.data.list[i]
								j++;
							}
						}
						
						this.tabledata = tData;
						this.pageInfo.total = tData.length;
					})
			},
			//结算
			update() {
				//发送ajax
				this.axios.put("http://localhost:8080/driverSettle", {
					"id":this.updateform.id,
					"isSettle":1,
					"moneyed":this.updateform.moneyed
				}).then(
					res => {
						//this.updateform = {};
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.dialogFormVisible = false;
						this.getList();
					})
			},
			//没结算
			isupdate() {
				this.$message({
					message: '结算失败',
					type: 'warning'
				});
				this.dialogFormVisible = false
			},
			//搜索功能
			findByCid() {
				//发送ajax
				this.axios.get("http://localhost:8080/driverSettle/" + this.inputcid).then(
					res => {
						//console.log(res.data.data);
						this.tabledata = [];
						var re = [];
			
						if (res.data.data.isSettle != 1) {
							re.push(res.data.data);
							this.tabledata = re;
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.pageInfo.total = 1;
						}else{
							this.$message({
								message: '订单已结算',
								type: 'warning'
							});
							this.pageInfo.total = 0;
						}
						
						//console.log(this.tabledata);
					})
			}

		},
			data() {
				return {
					inputcid: '',
					select: '',
					currentPage: 1,
					pageSize: 5,
					pageInfo: {},
					tabledata:[],
					dialogFormVisible: false,
					formLabelWidth: '120px',
					updateform:{
						id: '',
						money:'',
						moneyed:''
					}
				}
			},
			computed: {
				tableMaxHeight() {
					return window.innerHeight - 170 + 'px';
				}
			},
			//初始化列表
			created() {
				this.getList();
			}
	}
</script>

<style>
</style>
